<template>
  <view class="edit-profile-page">
    <!-- 自定义导航栏 -->
    <custom-navbar title="编辑资料"></custom-navbar>

    <!-- 注册表单 -->
    <view class="form-container">
      <!-- 表单输入区域 -->
    <view class="form-section">
      <view class="form-item">
          <view class="input-label">负责人:</view>
          <view class="input-wrapper">
        <input 
          v-model="formData.name"
              placeholder="输入负责人姓名" 
              class="input-field"
        />
      </view>
      </view>
      
      <view class="form-item">
          <view class="input-label">身份证号码:</view>
          <view class="input-wrapper">
        <input 
          v-model="formData.idCard"
              placeholder="输入负责人身份证号码" 
              class="input-field"
          maxlength="18"
        />
      </view>
    </view>

      <view class="form-item">
          <view class="input-label">手机号:</view>
          <view class="input-wrapper">
        <input 
              type="number" 
          v-model="formData.phone"
              placeholder="输入手机号" 
              class="input-field"
          maxlength="11"
        />
          </view>
      </view>
      
      <view class="form-item">
          <view class="input-label">店名:</view>
          <view class="input-wrapper">
        <input 
          v-model="formData.shopName"
              placeholder="输入店名" 
              class="input-field"
        />
      </view>
      </view>
      
      <view class="form-item">
          <view class="input-label">工商营业执照号码:</view>
          <view class="input-wrapper">
        <input 
              v-model="formData.licenseNumber" 
              placeholder="输入号码" 
              class="input-field"
        />
      </view>
      </view>
      
      <view class="form-item">
          <view class="input-label">经营区域:</view>
          <view class="input-wrapper select-wrapper" @click="showAreaPicker">
            <text class="select-text" :class="{ placeholder: !formData.area }">
              {{ formData.area || '选择区县' }}
            </text>
            <image src="/static/收起箭头小.png" mode="aspectFit" class="select-arrow"></image>
          </view>
      </view>
      
      <view class="form-item">
          <view class="input-label">地址:</view>
          <view class="input-wrapper">
            <input 
              v-model="formData.shopAddress" 
              placeholder="输入详细地址" 
              class="input-field"
            />
        </view>
      </view>
    </view>

      <!-- 商家简介区域 -->
    <view class="form-section">
        <view class="section-title">商家简介</view>
        <view class="textarea-wrapper">
          <textarea 
            v-model="formData.introduction" 
            placeholder="请简单的介绍一下公司的情况" 
            class="textarea-field"
            maxlength="500"
          ></textarea>
        </view>
      </view>
      
      <!-- 图片上传区域 -->
      <view class="form-section">
        <!-- 身份证正反面照片 -->
        <view class="upload-section">
          <view class="section-title">身份证正反面照片</view>
          <view class="upload-row">
            <view class="upload-item" @click="chooseImage('idCardFront')">
              <image v-if="formData.idCardFront" :src="formData.idCardFront" mode="aspectFill" class="uploaded-image"></image>
              <view v-else class="upload-placeholder">
                <image src="/static/加号.png" mode="aspectFit" class="plus-icon"></image>
                <text class="upload-text">上传人像面</text>
              </view>
            </view>
            <view class="upload-item" @click="chooseImage('idCardBack')">
              <image v-if="formData.idCardBack" :src="formData.idCardBack" mode="aspectFill" class="uploaded-image"></image>
              <view v-else class="upload-placeholder">
                <image src="/static/加号.png" mode="aspectFit" class="plus-icon"></image>
                <text class="upload-text">上传国徽面</text>
      </view>
      </view>
      </view>
    </view>

        <!-- 营业执照 -->
        <view class="upload-section">
          <view class="section-title">营业执照</view>
          <view class="upload-item" @click="chooseImage('license')">
            <image v-if="formData.license" :src="formData.license" mode="aspectFill" class="uploaded-image"></image>
            <view v-else class="upload-placeholder">
              <image src="/static/加号.png" mode="aspectFit" class="plus-icon"></image>
              <text class="upload-text">上传照片</text>
      </view>
      </view>
    </view>

        <!-- 门店照片 -->
        <view class="upload-section">
          <view class="section-title">门店照片</view>
          <view class="upload-item" @click="chooseImage('shopPhoto')">
            <image v-if="formData.shopPhoto" :src="formData.shopPhoto" mode="aspectFill" class="uploaded-image"></image>
            <view v-else class="upload-placeholder">
              <image src="/static/加号.png" mode="aspectFit" class="plus-icon"></image>
              <text class="upload-text">上传照片</text>
      </view>
      </view>
    </view>
      </view>
      
      <!-- 保存按钮 -->
      <button class="register-btn" @click="saveProfile" :disabled="!canSave">
        保存
      </button>
    </view>

    <!-- 区域选择器弹窗 -->
    <uni-popup ref="areaPopup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">选择经营区域</text>
          <text class="popup-close" @click="closeAreaPicker">关闭</text>
        </view>
        <picker-view 
          :value="areaPickerValue" 
          @change="onAreaChange" 
          class="area-picker"
        >
          <picker-view-column>
            <view class="picker-item" v-for="(item, index) in areaList" :key="index">
              {{ item }}
      </view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  components: {
    'custom-navbar': () => import('@/components/custom-navbar.vue')
  },
  data() {
    return {
      areaList: ['朝阳区', '海淀区', '丰台区', '石景山区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区', '密云区', '延庆区'],
      areaPickerValue: [0],
      formData: {
        name: '张大美',
        idCard: '40365236541232563',
        phone: '18893039203',
        shopName: '大美汽修店',
        licenseNumber: '4252336467474764646',
        area: '焦作市山阳区',
        shopAddress: '山阳区迎宾路32号',
        introduction: '这里是简单的商家介绍这里是简单的商家介绍这里是简单的这里是简单的商家介绍商家介绍。',
        idCardFront: '/static/1.jpg',
        idCardBack: '/static/OIP-C.jpg',
        license: '/static/vvvip.png',
        shopPhoto: '/static/vvvip.png'
      }
    }
  },
  computed: {
    canSave() {
      return this.formData.name.trim() &&
             this.formData.idCard.trim() &&
             this.formData.phone.length === 11 &&
             this.formData.shopName.trim() &&
             this.formData.licenseNumber.trim() &&
             this.formData.area &&
             this.formData.shopAddress.trim() &&
             this.formData.introduction.trim()
    }
  },
  onLoad() {
    this.loadProfileData();
  },
  methods: {
    loadProfileData() {
      // TODO: 调用后端API获取用户资料
      // this.$api.getProfile().then(res => {
      //   this.formData = res.data;
      // });
    },
    
    chooseImage(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.formData[type] = res.tempFilePaths[0];
        }
      });
    },
    
    showAreaPicker() {
      this.$refs.areaPopup.open();
    },
    
    closeAreaPicker() {
      this.$refs.areaPopup.close();
    },
    
    onAreaChange(e) {
      const index = e.detail.value[0];
      this.formData.area = this.areaList[index];
      this.areaPickerValue = [index];
    },
    
    goBack() {
      uni.navigateBack();
    },
    
    saveProfile() {
      if (!this.canSave) {
        uni.showToast({
          title: '请完善所有必填信息',
          icon: 'none'
        });
        return;
      }
      
      // 验证手机号格式
      const phoneReg = /^1[3-9]\d{9}$/;
      if (!phoneReg.test(this.formData.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }
      
      // 验证身份证号格式
      const idCardReg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      if (!idCardReg.test(this.formData.idCard)) {
        uni.showToast({
          title: '请输入正确的身份证号码',
          icon: 'none'
        });
        return;
      }
      
      // 显示加载中
      uni.showLoading({
        title: '保存中...'
      });
      
      // TODO: 调用后端API保存资料
      // this.$api.updateProfile(this.formData).then(res => {
      //   uni.hideLoading();
      //   uni.showToast({
      //     title: '保存成功',
      //     icon: 'success'
      //   });
      //   setTimeout(() => {
      //     uni.navigateBack();
      //   }, 1500);
      // }).catch(err => {
      //   uni.hideLoading();
      //   uni.showToast({
      //     title: '保存失败',
      //     icon: 'none'
      //   });
      // });
      
      // 模拟API调用
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }, 1000);
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-profile-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
  padding-top: calc(env(safe-area-inset-top) + 88rpx);
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: calc(env(safe-area-inset-top) + 88rpx);
    left: 0;
    right: 0;
    height: 600px;
    background-image: linear-gradient(
      to bottom,
      #2f81fa 0%, #2f81fa 33.33%,
      #f7f7f7 33.33%, #f7f7f7 100% 
    );
    background-repeat: no-repeat;
    z-index: 0;
  }
}

.form-container {
  position: relative;
  z-index: 1;
  padding: 0 40rpx 40rpx;
  margin-top: 20rpx;
}

.form-section {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.form-item {
  margin-bottom: 30rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .input-label {
    font-size: 28rpx;
    color: #333333;
    margin-bottom: 16rpx;
    font-weight: 500;
  }
  
  .input-wrapper {
    background: #f8f9fa;
    border: 2rpx solid #e9ecef;
    border-radius: 12rpx;
    padding: 0 24rpx;
    height: 88rpx;
  display: flex;
    align-items: center;
    
    .input-field {
      flex: 1;
      font-size: 32rpx;
      color: #333333;
    }
    
    &.select-wrapper {
      justify-content: space-between;
      
      .select-text {
        font-size: 32rpx;
        color: #333333;
        
        &.placeholder {
          color: #999999;
        }
      }
      
      .select-arrow {
        width: 32rpx;
        height: 32rpx;
        transform: rotate(0deg);
      }
    }
  }
}

.section-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: 600;
  margin-bottom: 24rpx;
}

.textarea-wrapper {
  background: #f8f9fa;
  border: 2rpx solid #e9ecef;
  border-radius: 12rpx;
  padding: 24rpx;
  
  .textarea-field {
    width: 100%;
    min-height: 200rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 1.5;
  }
}

.upload-section {
  margin-bottom: 40rpx;
  
  &:last-child {
  margin-bottom: 0;
}

  .upload-row {
    display: flex;
    gap: 20rpx;
    
    .upload-item {
      flex: 1;
    }
  }
  
  .upload-item {
  width: 100%;
    height: 200rpx;
    border: 2rpx dashed #d1d5db;
    border-radius: 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    
    .upload-placeholder {
  display: flex;
      flex-direction: column;
  align-items: center;
      
      .plus-icon {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 16rpx;
      }
      
      .upload-text {
  font-size: 28rpx;
        color: #666666;
      }
    }
    
    .uploaded-image {
      width: 100%;
      height: 100%;
      border-radius: 12rpx;
    }
  }
}

.register-btn {
  width: 100%;
  height: 88rpx;
  background: #007AFF;
  color: #ffffff;
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 500;
  margin-top: 40rpx;
  
  &:disabled {
    background: #cccccc;
    color: #999999;
  }
}

.popup-content {
  background: #ffffff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 40rpx;
  
  .popup-header {
  display: flex;
    justify-content: space-between;
  align-items: center;
    margin-bottom: 40rpx;
    
    .popup-title {
      font-size: 32rpx;
      color: #333333;
      font-weight: 600;
    }
    
    .popup-close {
  font-size: 28rpx;
      color: #007AFF;
    }
  }
  
  .area-picker {
    height: 400rpx;
    
    .picker-item {
      line-height: 80rpx;
  text-align: center;
      font-size: 32rpx;
      color: #333333;
}
}
}
</style>















